<template>
  <div class="tb">
    <mt-field label="其他燃料类型名称:" placeholder="请输入" type="text" v-model="fzdcbfd72019001"></mt-field>
    <mt-field label="对应车牌号码:" placeholder="请输入" type="text" v-model="fzdcbfd72019002"></mt-field>
    <mt-field label="对应车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor"></mt-field>    
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <!-- 车牌颜色选择器 -->
    <mt-popup
      v-model="popupVisibleColor"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
          <div class>请选择车牌颜色</div>
          <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import {Toast} from 'mint-ui'

export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      fzdcbfd72019001: "",
      fzdcbfd72019002: "",
      fzdcbfd72019003:"",
      slotsColor: [
        {
          values: [{"code":"1","flag":"Dcq","name":"蓝色"},
          {"code":"2","flag":"Dcq","name":"黄色"},
          {"code":"3","flag":"Dcq","name":"黑色"},
          {"code":"4","flag":"Dcq","name":"白色"},
          {"code":"5","flag":"Dcq","name":"黄绿"},
          {"code":"6","flag":"Dcq","name":"渐变绿"},
          {"code":"9","flag":"Dcq","name":"其他"},]
        }
      ],
      currentTagsColor: {},
      popupVisibleColor: false,
    };
  },
  watch: {
    
  },
  created() {},
  mounted() {},
  methods: {
    // 校验条件
    check(){
      if(this.fzdcbfd72019001 == ''){
          Toast("其他燃料类型名称不能为空！");
      } else if(this.fzdcbfd72019002 == ''){
          Toast("对应车牌号码不能为空！");
      } else if(this.fzdcbfd72019003 == ''){
          Toast("对应车牌颜色不能为空！");
      } else {
        this.commit();
      }
    },
    commit() {
      let data = {};
      let fzdcbfd07 = {};
      (fzdcbfd07.recid = this.recid),
        (fzdcbfd07.yhmlk = this.yhmlk = this.$route.query.yhmlk),
        (fzdcbfd07.fzdcbfd72019001 = this.fzdcbfd72019001),
        (fzdcbfd07.fzdcbfd72019002 = this.fzdcbfd72019002),
        (fzdcbfd07.fzdcbfd72019003 = this.fzdcbfd72019003),
        (data.fzdcbfd07 = fzdcbfd07),
        console.log("辅助表5-其他"+JSON.stringify(data));
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/assit/saveFzdcbfd07",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              if (result.data.status == "1000") {
                console.log("保存成功");
                console.log(result);
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    
    // 选择车牌颜色
    choseColor() {  
      this.popupVisibleColor = true;
    },
    //车牌颜色
    handleConfigColor: function() {
      this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
      this.fzdcbfd72019003 = this.currentTagsColor.code;
      this.popupVisibleColor = false;
    },
    
    goback() {
      this.$router.go(-1);
    },
    
  },
  mounted(){
      
  },
  updated: function () {
        
    }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>